<!DOCTYPE html>
<html lang="en">
<head>
    <th:block th:include="admin/include :: head" />
    <th:block th:include="admin/include :: markdown" />
</head>
<body>
<div id="app">
    <th:block th:include="admin/include :: header-nav"/>
    <div class="page-main">
        <th:block th:include="admin/include::nav-menu" />
        <div class="page-content">
            <div class="breadcrumb">
                <p><i class="iconfont icon-edit-fill"></i> 发布文章</p>
            </div>
            <div class="content-body">
                <div style="float:left;width:70%">
                    <label style="font-size: 1rem;font-weight: bold">
                        标题
                    </label>
                    <label style="margin:10px 0;display: block">
                        <input type="text" class="bl-input" id="title" name="title" style="width: 100%"/>
                    </label>
                    <label style="font-size: 1rem;font-weight: bold">
                        正文
                    </label>
                    <div id="article-edit" style="margin:10px 0;">
                        <textarea style="display: none"></textarea>
                    </div>
                </div>
                <div style="float:left;width:25%" class="clearfix">
                    <div style="padding:10px;text-align: center">
                        <button class="bl-btn bl-btn-primary" type="button" style="width: 80%" id="save" bl-size="medium">立即发布</button>
                    </div>
                    <div style="padding: 10px">
                        <label>
                            分类：
                        </label>
                        <label>
                            <select name="class">
                                <option value="">未分类</option>
                            </select>
                        </label>
                    </div>
                    <div style="padding: 10px">
                        <label>
                            状态：
                        </label>
                        <label>
                            <select name="class">
                                <option value="">公开</option>
                            </select>
                        </label>
                    </div>
                    <div style="padding: 10px">
                        <label>
                            置顶：
                        </label>
                        <label>
                            <select name="class">
                                <option value="">全局</option>
                            </select>
                        </label>
                    </div>
                    <div style="padding: 10px">
                        <label>
                            禁止评论：
                        </label>
                        <label>
                            <select name="class">
                                <option value="">是</option>
                            </select>
                        </label>
                    </div>
                    <div style="padding: 10px">
                        <label>
                            别名
                        </label>
                        <label>
                            <input type="text" class="bl-input" name="alias" style="width: 70%"/><br>
                        </label>
                    </div>
                    <div style="padding: 10px">
                        <label>
                            标签
                        </label>
                        <label>
                            <input type="text" class="bl-input" name="tags" style="margin-top:10px;width: 70%"/>
                        </label>
                    </div>
                </div>
                <div style="clear: both"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var testEditor;

    $(function() {
        testEditor = editormd("article-edit", {
            width   : "100%",
            height  : 450,
            syncScrolling : "single",
            imageUpload: true,
            saveHTMLToTextarea: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/upload",
            path    : "../../lib/editormd/lib/"
        });

        $("#save").click(function () {
            console.log(testEditor.getHTML());
            $.ajax({
                url: '/admin/article/save',
                method: 'post',
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify({'articleTitle':$("#title").val(),'articleContent':testEditor.getHTML()}),
                dataType: 'json',
                success: function (response) {
                    console.log(response);
                }
            })
        })
    });
</script>
</body>
</html>